<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

  <!--  <button @click="numberClick1">{{number1}}</button>
    <button @click="numberClick2">{{number2}}</button>-->
    <counter v-model="number1"></counter>
    <counter v-model="number2"></counter>
    <hr/>
    num1:{{number1}}
    num2:{{number2}}
    <hr/>
     sum:{{sum}}
</div>

</body>
<script src="../../lib/vue.js"></script>
<script type="module">
      import component from "../../component/counter3.js"
    new Vue({
        el:'#app',
        components:{
          counter:component.counter
        },
        data:{
            number1:2,
            number2:3,
            num1:0,
            num2:0
        },
        methods:{
            numberClick1:function () {
                this.number1++;
            },numberClick2:function () {
                this.number2++;
            },
            getNumber1:function (val) {
                this.num1 = val;
            }, getNumber2:function (val) {
                this.num2 = val;
            }
        },computed:{
            sum:function () {
                return this.number1 + this.number2;
            }
        }
    })
</script>
</html>